<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>健康科普前台</title>
    <script src="/js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/js/bootstrap-3.3.7-dist/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/css/healthKnows.css"/>
    <script src="/js/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="container-fluid">
    <!-- 第一部分就是四个字 健康科普 -->
    <div  class="part1-bgi col-lg-12">
        <h1 class="text-center text-black part1-textSet">健康科普</h1>

    </div>
    <div class="row" >
        <div  th:each="health,status:${session.healthKnows}">

            <!-- 第二部分 ： 分页 每页六部分关于健康科普的知识内容 -->
<!--            <div class="col-lg-1 part2-height">-->
<!--            </div>-->
            <div class="col-lg-6 part2-height">
                <!-- 每部分内容包括：图片、标题、发布时间 -->
                <div class="col-lg-6 bgc">
                    <a th:href="@{/selectByHealthId(id=${health.healthId})}"><img th:src="${'/images/'+health.healthImg}"></a>
                </div>
                <div class="col-lg-6" >
                    <div class="col-lg-12 part2-inheight">
                        <a th:href="@{/selectByHealthId(id=${health.healthId})}">
                            <h4 th:text="${health.healthTitle}">标题</h2>
                        </a>
                    </div>
                    <div class="col-lg-12 part2-inheight">
                        <h5 th:text="${health.healthDate}">发布时间</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 分页 -->
    <div class="col-lg-12 text-center">
        <ul class="pagination pagination-lg" th:each="page,status:${session.pages}">
            <li><a th:href="@{/queryByPage2(page=${status.index})}" th:text="${status.index+1}">1</a></li>
        </ul><br>
    </div>
</div>
</body>
</html>